<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>我的博客</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="/libs/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/cms.css"/>
    <!-- 此路径需要联网才能使用  因为是网络资源-->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    </style>
    <script type="text/javascript">
    	function fenye(cpage){
    		location="/my/blogs?cpage="+cpage;
    	}
    </script>
  </head>
  <body>
    <jsp:include page="/WEB-INF/inc/top.jsp"></jsp:include>
	
	<!-- 横幅 -->
	<div class="container">
		<div class="row">
			<div class="col-xs-12 my_banner">
			</div>
		</div>
	</div>
	<br/>
	<!-- 主体内容区 -->
	<div class="container">
		<div class="row">
			<div class="col-md-3">
				<jsp:include page="/WEB-INF/inc/my_left.jsp">
					<jsp:param value="blogs" name="module"/>
				</jsp:include>
			</div>
			<div class="col-md-9">
				<div class="panel panel-default">
				  <div class="panel-body">
				    	<h1>我的博客</h1>
				    	<hr/>
				    	<table class="table table-striped table-bordered table-hover">
				    		<thead>
				    			<tr class="info">
				    				<th>标题</th>
				    				<th>分类</th>
				    				<th>频道</th>
				    				<th>点击量</th>
				    				<th>评论数</th>
				    				<th>时间</th>
				    				<th>操作</th>
				    			</tr>
				    		</thead>
				    		<tbody class="">
				    		<c:forEach items="${blogs}" var="blog">
				    			<tr id="item_${blog.id}">
				    				<td width="30%">${blog.title}</td>
				    				<td>${blog.category.name}</td>
				    				<td>${blog.channel.name}</td>
				    				<td>${blog.hits}</td>
				    				<td>${blog.comp_count}</td>
				    				<td><fmt:formatDate value="${blog.updated}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
				    				<td><a href="/my/blog/edit?id=${blog.id}" title="编辑"><span class="glyphicon glyphicon-edit"></span></a>&nbsp;&nbsp;
				    				<a href="#" onclick="removeBlog(${blog.id});" title="删除"><span class="glyphicon glyphicon-remove"></span></a></td>
				    			</tr>
				    		</c:forEach>
				    		</tbody>
				    		<tfoot>
				    			<tr>
				    				<td colspan="22">
<!-- 				    					<input type="button" value="首页" onclick="fenye(1)"> -->
<%-- 				    					<input type="button" value="上一页" onclick="fenye(${pi.isIsFirstPage()?1:pi.getPrePage()})"> --%>
<%-- 				    					<input type="button" value="下一页" onclick="fenye(${pi.isIsLastPage()?pi.getPages():pi.getNextPage()})"> --%>
<%-- 				    					<input type="button" value="尾页" onclick="fenye(${pi.getPages()})"> --%>
											 <!-- bootstrap 4 的分页用的是有序列表 ul li
											 	ul 加入class="pagination" 就会生成 分页的样式
											 	每一行 li加入 page-item  分页向
											 	每个A 标签加入 page-link  会有 整行的样式 
											 	在li中加入active 代表被选中
											 			 disables 代表不可用
											  -->
											  <ul class="pagination">
											    <li class="page-item" >
											    	<a class="page-link" href="#" onclick="fenye(1)" >First</a>
											    </li>
											    <li>
											    	<a class="page-link" href="#" onclick="fenye(${pi.isIsFirstPage()?1:pi.getPrePage()})" >
											 			Previous
											 		</a>
											 	</li>
												<c:forEach items="${pi.getNavigatepageNums() }" var="page">
												 	<li class="${pi.getPageNum()==page?'active':'' }"><a class="page-link" href="#" onclick="fenye(${page})">${page }</a></li>
												</c:forEach>
											    <li >
											    	<a class="page-link" href="#" onclick="fenye(${pi.isIsLastPage()?pi.getPages():pi.getNextPage()})" >
											    		Next
											    	</a>
											    </li>
											    <li class="page-item">
											    	<a class="page-link" href="#" onclick="fenye(${pi.getPages()})" >
											    		Last
											    	</a>
											    </li>
											 </ul>
				    				</td>
				    			</tr>
				    		</tfoot>
				    	</table>
				  </div>
				</div>
				
			</div>
		</div>
	</div>
	
	<jsp:include page="/WEB-INF/inc/footer.jsp"/>
	
	<script type="text/javascript">
		function removeBlog(id){
			if(confirm("您是否要删除这篇博客？")){
				$.ajax({
					url:'/my/blog/remove?id=' + id,
					type:'get',
					success:function(data){
						if(data>0){
							// 刷新页面
							location.reload();
						}
// 						if(data>0){
// 							$("#item_" + id).remove();
// 						}else{
// 							alert(data.message);
// 						}
					}
				});
			}
			return false;
		}
	</script>
  </body>
</html>